<template>
<div class="course-list">
  <x-header :left-options="{preventGoBack:true}" @on-click-back="$router.push('/home')">课程叭
    <a class="imenu" slot="right" @click="toSearch"><i class="icon-sousuo"></i></a>
    <a class="imenu" slot="right" @click="$router.push('/courseadd')"><i class="icon-plus"></i></a>
  </x-header>
  <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:52px;min-height: 500px;" ref="my_scroller">
    <div class="item-box" v-for="(item,i) in list" :key="i" @click="$router.push(`/coursedetail/${item._id}`)">
      <div class="course-content">
        <div class="left-part">
          <div class="avatar">
            <avatar v-if="item.courseObj && item.courseObj.gender == '男'" :src="require('../../assets/avatar1.png')"
              :size="40"></avatar>
            <avatar v-else-if="item.courseObj && item.courseObj.gender == '女'" :src="require('../../assets/avatar2.png')"
              :size="40"></avatar>
            </div>
          <div class="course-teacher">
            <p class="course">{{item.content}}</p>
            <p class="teacher">{{item.title}}
              <!-- <span>{{item.courseObj && item.courseObj.gender}}</span> -->
              <span style="color:#666666;">{{item.courseObj && item.courseObj.college}}</span>
            </p>
          </div>
        </div>
        <div class="total-score">
          <span class="score">{{Average(item.scores) || 0}}分</span>
          <p class="total">{{item.cmtNum || 0}}人评价</p>
        </div>
      </div>
      <div class="tags">
        <span class="tag" v-for="(item, index) in Tags(item.tags)" :key="index" >{{item.value}} ({{item.num}})</span>
        <!-- <span class="tag">吐槽打人</span><span class="tag">佛系点名</span><span class="tag">帅气</span> -->
      </div>
      <div class="foot">
        <!-- <span><i class="icon-fenxiang"></i>{{item.shareNum}}</span> -->
        <!-- <span @click.stop="$router.push(`/coursedetailcmt/${item._id}`)"><i class="icon-message"></i>{{item.cmtNum}}</span>
        <span @click.stop="_toLike(item)">
          <i class="icon-dianzan1" :class="{active: myLikePostObj[item._id]}"></i>{{item.likeNum || 0}}
        </span> -->
      </div>
    </div>
  </scroller>
</div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { getUnixTime } from '../../js/utils'
import { XHeader } from 'vux';
import Avatar from 'vue-avatar';
const ListStore = namespace('list');
const HomeStore = namespace('home');
const MineStore = namespace('mine');

@Component({
  components: {
    Avatar,
    XHeader
  }
})
export default class CourseList extends Vue {
  @ListStore.Action getCourseList;
  @ListStore.State courseList;
  @ListStore.State pointList
  @ListStore.State tagsList
  @ListStore.State tagsObject
  @HomeStore.Action getLikePost;
  @MineStore.State myLikePostObj
  @MineStore.Action getMyLikePosts
  @HomeStore.Action getLikePost;
  list = [];
  // pointList = [
  //   { title: '教得好', val: 0 },
  //   { title: '挂科少', val: 0 },
  //   { title: '给分高', val: 0 },
  //   { title: '点名少', val: 0 },
  //   { title: '作业多', val: 0 }
  // ]
  // tagsList = [
  //   { id: '1', name: '幽默' },
  //   { id: '2', name: '负责' },
  //   { id: '3', name: '厉害' },
  //   { id: '4', name: '严肃' }
  // ]
  currentPage = 1
  pageSize = 10
  noDataText = '--我也是有底线的--'
  infinite () {
    this.initCourseList()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  _toLike (item, i) {
    const params = {
      postId: item._id
    }
    this.getLikePost(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        if (this.myLikePostObj[item._id]) {
          item.likeNum--;
        } else {
          this.$vux.toast.text('点赞成功', 'middle');
          item.likeNum++;
        }
        // this.getMyLikePosts();
      }
    })
  }
  initCourseList () {
    const params = {
      current: this.currentPage,
      pageSize: this.pageSize,
      createTime: getUnixTime(this.myTime),
      type: 3
    }
    this.getCourseList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.courseList
        this.list = this.list.concat(list)
      }
    })
  }
  toSearch () {
    this.$router.push({
      path: '/search',
      query: {
        id: 3
      }
    })
  }
  Average (scores) {
    return (scores.reduce((acc, item) => acc + item, 0) / scores.length).toFixed(1) || 0;
  }
  Tags (tags) {
    // if (tag && typeof tag === 'object') {
    //   return Object.keys(tag);
    // }
    return Object.keys(tags).map(t => ({value: this.tagsObject[t], num: tags[t]}))
  }
  created () {
    // this.initCourseList()
  }
}
</script>
<style lang="less">
.course-list {
  padding-top: 51px;
  .imenu {
    padding: 0 8px 8px;
    a {
      margin-left: 0!important;
    }
  }
  .item-box {
    // font-size: 12px;
    background: #ffffff;
    width: 95%;
    margin: 0 auto;
    margin: 0 auto 4px auto;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .course-content {
      width: 100%;
      display: inline-block;
      position: relative;
      .left-part {
        display: flex;
        align-items: center;
        .avatar {
          display: inline-block;
          vertical-align: top;
          width: 50px;
        }
        .course-teacher {
          padding: 5px 0;
          display: inline-block;
          overflow: hidden;
          .course {
            font-size: 14px;
            color: #000000;
          }
          .teacher {
            font-size: 12px;
            color: #333333;
            span {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .tags {
      margin: 3px 0;
      .tag {
        display: inline-block;
        color: #666666;
        margin-right: 10px;
        margin-bottom: 5px!important;
        // border: 1px solid red;
        padding: 2px 6px;
        border-radius: 5px;
        background: #ebebeb;
        // font-size: 12px;
      }
    }
    .total-score {
      position: absolute;
      top: 0;
      right: 0;
      // float: right;
      text-align: center;
      .score {
        font-size: 16px;
      }
      .total {
        // font-size: 12px;
      }
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 20px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #C4C4C4;
        &.active{
        	color:#EFA79B;
        }
      }
    }
  }
  .hot-comment {
    align-items: flex-start;
    .weui-cell__ft {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .vux-label {
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}
</style>
